<script setup>
import { onMounted, ref } from 'vue';
import HomePanel from './HomePanel.vue'
import { getProductAPI } from '@/api/product';
import GoodsItem from './GoodsItem.vue';
const goodsProduct = ref([])
onMounted(async () => {
    try {
        const product = await getProductAPI()

        goodsProduct.value = product.result
        // console.log("product", goodsProduct);
    } catch {

    }

})

</script>

<template>
    <div class="home-product">
        <HomePanel v-for="item in goodsProduct" :title="item.name" :key="item.id">
            <template #main>
                <div class="product">
                    <div class="product-left">
                        <RouterLink to="/"><img v-img-lazy="item.picture" alt=""></RouterLink>
                    </div>
                    <div class="product-right">
                        <ul>
                            <li v-for="val in item.goods">
                                <RouterLink to="/">
                                    <div>
                                        <GoodsItem :goods="val"> </GoodsItem>
                                    </div>
                                </RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>

            </template>
        </HomePanel>
    </div>
</template>

<style scoped lang='scss'>
.home-product {

    margin: 0 auto;

}

.product {
    display: flex;
    justify-content: space-between;
}

.product-left {
    width: 25%;
    height: 500px;
    background-color: aquamarine;

    img {
        width: 100%;
        height: 100%;
    }
}

.product-right {
    width: 75%;
    height: 500px;
    background-color: #412222;

    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 20px;

        li {
            width: 20%;
            margin: 10px;
            margin-top: 30px;



        }
    }


}
</style>